<template>
  <div class="boxs">
    <div class="boxs-top">
      <titles :title="props.info.text" style="margin-bottom: 32px" />
      <span
        class="left-title"
        :style="{
          fontSize: store.styleInfo.contentSize,
          fontFamily: store.styleInfo.textFamily,
          color: store.styleInfo.fontColor,
          marginBottom: '100px',
        }"
        >{{ props.info.remarks }}</span
      >
    </div>
    <div class="boxs-content">
      <div class="content-item">
        <div
          @click="pathChild(props.info.children[0])"
          class="content-item-left"
          :style="{ background: store.styleInfo.auxiliaryColor }"
          style="cursor: pointer"
        >
          <span
            class="titles"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ props.info.children[0].text }}</span
          >
          <span
            class="left-title1"
            :style="{
              fontSize: store.styleInfo.contentSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ props.info.children[0].remarks }}</span
          >
        </div>
        <img
          style="cursor: pointer"
          @click="pathChild(props.info.children[0])"
          :src="urls + props.info.children[1].value + '?imageView2/1/w/410/h/560/format/webp'"
          alt=""
          v-if="props.info.children[1].value"
        />

        <img
          style="cursor: pointer"
          @click="pathChild(props.info.children[0])"
          src="http://101.34.143.36:8890/api/image/387939155165253/h_560,w_410"
          alt=""
          v-else
        />
      </div>
      <div class="content-item">
        <img
          style="cursor: pointer"
          @click="pathChild(props.info.children[1])"
          :src="urls + props.info.children[1].value + '?imageView2/1/w/410/h/560/format/webp'"
          alt=""
          v-if="props.info.children[1].value"
        />

        <img
          style="cursor: pointer"
          @click="pathChild(props.info.children[1])"
          src="http://101.34.143.36:8890/api/image/387939155165253/h_560,w_410"
          alt=""
          v-else
        />
        <div
          style="margin-right: 0px; margin-left: 20px; cursor: pointer"
          @click="pathChild(props.info.children[1])"
          class="content-item-left"
          :style="{ background: store.styleInfo.auxiliaryColor }"
        >
          <span
            class="titles title-right"
            :style="{
              fontSize: store.styleInfo.mintitleSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ props.info.children[1].text }}</span
          >
          <span
            class="left-title1"
            :style="{
              fontSize: store.styleInfo.contentSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ props.info.children[1].remarks }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { onMounted } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const router = useRouter();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
});
const pathChild = (e: any) => {
  store.setchildModel(e);
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: {},
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.boxs-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20%;
}
.boxs-content {
  width: 100%;
  display: flex;
}
.content-item {
  width: 50%;
  display: flex;
  .content-item-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    flex: 1;
    // min-width: 280px;
  }

  img {
    width: 280px;
    height: auto;
    margin-left: 20px;
  }
}

.left-title1 {
  width: 100%;
  margin-bottom: 32px;
  padding: 0 !important;
}
.title-right {
  // margin-right: 20px;
}
.titles {
  margin-bottom: 30px;
}
</style>
